<template>
  <el-dialog
    :title="!dataForm.shipownerName ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="100px"
    >
      <el-form-item label="派遣船员" prop="dispatchCrew">
        <el-input v-model="dataForm.dispatchCrew" placeholder="派遣船员" class="width400"></el-input>
        <!-- <el-select v-model="dataForm.dispatchCrew" disabled placeholder="请选择">
          <el-option
            v-for="item in optionsDispatchCrew"
            :key="item.crewId"
            :label="item.crewName"
            :value="item.crewName"
          ></el-option>
        </el-select>-->
      </el-form-item>
      <el-form-item label="船东名称" prop="shipownerName">
        <el-input v-model="dataForm.shipownerName" placeholder="船东名称" class="width400"></el-input>
      </el-form-item>
      <el-form-item label="船舶名称" prop="vesselName">
        <el-input v-model="dataForm.vesselName" placeholder="船舶名称" class="width400"></el-input>
      </el-form-item>
      <el-form-item label="上船职务" prop="aboardPost">
        <!-- <el-input v-model="dataForm.aboardPost" placeholder="上船职务"></el-input> -->
        <el-select v-model="dataForm.aboardPost" placeholder="请选择" class="width400">
          <el-option
            v-for="item in optionsAboardPost"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上船地点" prop="ashoreSite">
        <el-input v-model="dataForm.ashoreSite" placeholder="上船地点" class="width400"></el-input>
      </el-form-item>
      <el-form-item label="上船时间" prop="aboardTime">
        <!-- <el-input v-model="dataForm.aboardTime" placeholder="上船时间"></el-input> -->
        <el-date-picker
         class="width400"
          v-model="dataForm.aboardTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="预计在船时间" prop="estimateBoardTime">
        <el-input v-model="dataForm.estimateBoardTime" placeholder="预计在船时间"></el-input>
      </el-form-item>-->
      <el-form-item label="预计下船时间" prop="estimateDisembarkationTime">
        <!-- <el-input v-model="dataForm.estimateDisembarkationTime" placeholder="预计下船时间"></el-input> -->
        <el-date-picker
         class="width400"
          v-model="dataForm.estimateDisembarkationTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="派遣状态" prop="dispatchStatus">
        <!-- <el-input v-model="dataForm.dispatchStatus" placeholder="派遣状态"></el-input> -->
        <el-select v-model="dataForm.dispatchStatus" placeholder="请选择" class="width400">
          <el-option
            v-for="item in optionsDispatchStatus"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船舶类型" prop="shipType">
        <el-select v-model="dataForm.shipType" placeholder="请选择" class="width400">
          <el-option
            v-for="item in optionsShipType"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="航区" prop="navigationArea">
        <el-select v-model="dataForm.navigationArea" placeholder="请选择" class="width400">
          <el-option
            v-for="item in optionsNavigationArea"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="载重吨位" prop="deadweightTonnage">
        <el-input v-model="dataForm.deadweightTonnage" placeholder="载重吨位" class="width400"></el-input>
      </el-form-item>
      <el-form-item label="薪资" prop="salaryEquirement">
        <el-input v-model="dataForm.salaryEquirement" placeholder="薪资" class="width400"></el-input>
      </el-form-item>
      <el-form-item label="币种" prop="currency">
        <el-select v-model="dataForm.currency" placeholder="请选择" class="width400">
          <el-option
            v-for="item in optionsCurrency"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合同" prop="contractId">
        <!-- <el-input v-model="dataForm.contractId" placeholder="合同"></el-input> -->
        <el-select v-model="dataForm.contractId" placeholder="请选择" class="width400">
          <el-option
            v-for="item in optionsContractId"
            :key="item.contractId"
            :label="item.contractName"
            :value="item.contractId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合同有效期" prop="endTime">
        <el-date-picker
         class="width400"
          v-model="dataForm.endTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="所属公司" prop="affiliatedCompanyId">
        <el-select v-model="dataForm.affiliatedCompanyId" placeholder="请选择">
          <el-option
            v-for="item in optionsAffiliatedCompanyId"
            :key="item.affiliatedCompanyId"
            :label="item.companyName"
            :value="item.affiliatedCompanyId"
          ></el-option>
        </el-select>
      </el-form-item>-->
      <!-- <el-form-item label="派遣人" prop="createUserId">
        <el-input v-model="dataForm.createUserId" placeholder="派遣人"></el-input>
      </el-form-item>-->
      <!-- <el-form-item label="创建时间" prop="createTime">
        <el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
      </el-form-item>-->
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="dataForm.remarks" placeholder="备注" type="textarea"  class="width400"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      isadd: 0,
      visible: false,
      dataForm: {
        dispatchId: 0,
        dispatchCrew: "",
        shipownerName: "",
        vesselName: "",
        aboardPost: [],
        aboardTime: "",
        estimateBoardTime: "",
        estimateDisembarkationTime: "",
        dispatchStatus: "",
        shipType: "",
        navigationArea: "",
        deadweightTonnage: "",
        ashoreSite: "",
        remarks: "",
        salaryEquirement: "",
        currency: "",
        contractId: "",
        affiliatedCompanyId: "",
        createUserId: "",
        createTime: ""
      },
      dataRule: {
        dispatchCrew: [
          { required: true, message: "派遣船员不能为空", trigger: "blur" }
        ],
        shipownerName: [
          // { required: true, message: "船东名称不能为空", trigger: "blur" },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        vesselName: [
          { required: true, message: "船舶名称不能为空", trigger: "blur" },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        aboardPost: [
          { required: true, message: "上船职务不能为空", trigger: "blur" }
        ],
        aboardTime: [
          { required: true, message: "上船时间不能为空", trigger: "blur" }
        ],
        estimateBoardTime: [
            { type: 'number', message: '必须为数字值', trigger: 'blur' },
            { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        // estimateDisembarkationTime: [
        //   { required: true, message: "预计下船时间不能为空", trigger: "blur" }
        // ],
        dispatchStatus: [
          { required: true, message: "派遣状态不能为空", trigger: "blur" }
        ],
        // shipType: [
        //   { required: true, message: "船舶类型不能为空", trigger: "blur" }
        // ],
        // navigationArea: [
        //   { required: true, message: "航区不能为空", trigger: "blur" }
        // ],
        deadweightTonnage: [
          { required: true, message: "载重吨位不能为空", trigger: "blur" },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        ashoreSite: [
          { required: true, message: "上船地点不能为空", trigger: "blur" },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        remarks: [{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }],
        // salaryEquirement: [
        //   { required: true, message: "薪资不能为空", trigger: "blur" }
        // ],
        // currency: [
        //   { required: true, message: "币种不能为空", trigger: "blur" }
        // ],
        // contractId: [
        //   { required: true, message: "合同不能为空", trigger: "blur" }
        // ],
        // affiliatedCompanyId: [
        //   { required: true, message: "所属公司不能为空", trigger: "blur" }
        // ],
        // createUserId: [
        //   { required: true, message: "派遣人不能为空", trigger: "blur" }
        // ],
        createTime: [
          { required: true, message: "创建时间不能为空", trigger: "blur" }
        ]
      },
      optionsDispatchCrew: [],
      optionsAboardPost: [],
      optionsDispatchStatus: [],
      optionsShipType: [],
      optionsNavigationArea: [],
      optionsCurrency: [],
      optionsAffiliatedCompanyId: [],
      optionsContractId: []
    };
  },
  methods: {
    init(id, add) {
      this.isadd = add
      console.log('zhengenru',id, add)
      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${1}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsAboardPost = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${20}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsDispatchStatus = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${15}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsShipType = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${16}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsNavigationArea = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${18}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsCurrency = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl("/generator/affiliatedcompanyinfo/select"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsAffiliatedCompanyId =
          data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl("/generator/contractInfo/info"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        console.log('zhengenru------')
        console.log(data)
        this.optionsContractId = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl("/generator/crewinfo/select"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsDispatchCrew = data && data.code === 0 ? data.list : [];
      });

      this.dataForm.dispatchId = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.dispatchId) {
          this.$http({
            url: this.$http.adornUrl(
              `/generator/crewinfo/info/${this.dataForm.dispatchId}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              console.log(data)
              this.dataForm.dispatchCrew = data.crewInfo.crewName;
            }
          })
          this.$http({
            url: this.$http.adornUrl(
              `/generator/dispatchinfo/info/${this.dataForm.dispatchId}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.dispatchCrew = data.dispatchInfo.dispatchCrew;
              this.dataForm.shipownerName = data.dispatchInfo.shipownerName;
              this.dataForm.vesselName = data.dispatchInfo.vesselName;
              this.dataForm.aboardPost = data.dispatchInfo.aboardPost;
              this.dataForm.aboardTime = data.dispatchInfo.aboardTime;
              this.dataForm.estimateBoardTime =
                data.dispatchInfo.estimateBoardTime;
              this.dataForm.estimateDisembarkationTime =
                data.dispatchInfo.estimateDisembarkationTime;
              this.dataForm.dispatchStatus = data.dispatchInfo.dispatchStatus;
              this.dataForm.shipType = data.dispatchInfo.shipType;
              this.dataForm.navigationArea = data.dispatchInfo.navigationArea;
              this.dataForm.deadweightTonnage =
                data.dispatchInfo.deadweightTonnage;
              this.dataForm.ashoreSite = data.dispatchInfo.ashoreSite;
              this.dataForm.remarks = data.dispatchInfo.remarks;
              this.dataForm.salaryEquirement =
                data.dispatchInfo.salaryEquirement;
              this.dataForm.currency = data.dispatchInfo.currency;
              this.dataForm.contractId = data.dispatchInfo.contractId;
              this.dataForm.affiliatedCompanyId =
                data.dispatchInfo.affiliatedCompanyId;
              this.dataForm.createUserId = data.dispatchInfo.createUserId;
              this.dataForm.createTime = data.dispatchInfo.createTime;
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/generator/dispatchinfo/${
                this.isadd === 0 ? "save" : "update"
              }`
            ),
            method: "post",
            data: this.$http.adornData({
              dispatchId: this.dataForm.dispatchId || undefined,
              dispatchCrew: this.dataForm.dispatchCrew,
              shipownerName: this.dataForm.shipownerName,
              vesselName: this.dataForm.vesselName,
              aboardPost: this.dataForm.aboardPost,
              aboardTime: this.dataForm.aboardTime,
              estimateBoardTime: this.dataForm.estimateBoardTime,
              estimateDisembarkationTime: this.dataForm
                .estimateDisembarkationTime,
              dispatchStatus: this.dataForm.dispatchStatus,
              shipType: this.dataForm.shipType,
              navigationArea: this.dataForm.navigationArea,
              deadweightTonnage: this.dataForm.deadweightTonnage,
              ashoreSite: this.dataForm.ashoreSite,
              remarks: this.dataForm.remarks,
              salaryEquirement: this.dataForm.salaryEquirement,
              currency: this.dataForm.currency,
              contractId: this.dataForm.contractId,
              affiliatedCompanyId: this.dataForm.affiliatedCompanyId,
              createUserId: this.dataForm.createUserId,
              createTime: this.dataForm.createTime
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
